<template>
    <div style="background-color:aliceblue;">
        <!-- 详情 -->
        <el-row :gutter="20" style="margin-left: 20px;margin-top: 20px;">
            <el-col :span="6" :offset="0">
                <!-- 图片 -->
                <img :src="tracrable.goverImarger" style="max-width: 250px;max-height: 250px;">
            </el-col>
            <el-col :span="18" :offset="0" style="margin-top: 20px">
                <h1 style="font-weight: 600;">{{ tracrable.gName }}</h1><br>
                <span>生产批次：{{ tracrable.productionBatch }}</span>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
                <span>保质期：{{ tracrable.exprirationDate }}天</span><br><br>
                <span>生产许可证号：{{ tracrable.productionLicense }}</span>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <span>生产企业：{{ tracrable.productionEnterprise }}</span><br><br>
                <span style="font-weight: 600;">产品检验报告</span><br>
                <!-- 上传图片 -->
                <el-upload :file-list="fileList" action="http://localhost:5020/api/Uploadss/Upload"
                    list-type="picture-card" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-col>
        </el-row>

        <!-- 产品检测报告放大图 -->
        <el-dialog v-model="dialogVisible" style="width: 535px">
            <img w-full :src="dialogImageUrl" style="width: 500px;height: 500px;" alt="Preview Image" />
        </el-dialog>

        <div style="padding-top: 15px;padding-right: 90px;">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="养殖信息5/5" name="first">
                    <Cultivation></Cultivation>
                </el-tab-pane>
                <el-tab-pane label="屠宰信息5/5" name="second">
                    <Saughtetr></Saughtetr>
                </el-tab-pane>
                <el-tab-pane label="深加工信息5/5" name="third">
                    <Processing></Processing>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { type UploadProps, type UploadUserFile, ElMessage } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'

import Cookies from 'cookies-ts'


import Cultivation from './CultivAtion.vue'
import Saughtetr from './SaugHtetr.vue'
import Processing from './ProceSsing.vue'

const cookie = new Cookies();

const router = useRouter();
const route = useRoute();

const activeName = ref('first')
// tab标签事件
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const tracrable = ref({
    GoodId: 0,
    gName:"",
    productionBatch: "",
    exprirationDate: "",
    productionLicense: "",
    productionEnterprise: "",
    goverImarger: "1.jpg",
    pImg: "1.jpg,2.jpg",
})
// 批次Id
const pTimeId = route.query.TraceabilityId;
cookie.set("pTimeId", pTimeId);
// 溯源信息
const getTraceableInfo = async () => {
    const pTimeId = route.query.TraceabilityId;
    // 校验 pTimeId
    if (!pTimeId) {
        ElMessage.error("缺少 TraceabilityId 参数");
        return;
    }

    try {
        const response = await axios.get(
            `http://localhost:5020/api/InsertTraceabilityManagements/GetTraceabilitysFindCommond?TraceabilityId=${pTimeId}`
        );

        // 检查返回的数据
        if (!response.data) {
            ElMessage.error("未获取到数据");
            return;
        }

        // 更新 tracrable 的值
        tracrable.value = response.data;

        // 保存 pTimeId 到 cookie
        cookie.set("pTimeId", pTimeId);

        console.log("获取到的数据：", response.data);
    } catch (error) {
        // 处理请求错误
        console.error("请求失败：", error);
        ElMessage.error("请求数据失败，请稍后重试");
    }
};

const fileList = ref<UploadUserFile[]>([])

// 反填图片
const getFileUrl = () => {
    axios.get("http://localhost:5020/api/InsertTraceabilityManagements/GetTraceabilitysFindCommond?TraceabilityId=" + pTimeId).then(res => {
        if (res.data == null) return;
        fileList.value = res.data.pImg.split(",").map((x: any) => {
            return {
                name: x,
                url: "http://localhost:5020/api/Uploadss/GetImage?imageName=" + x
            }
});
    })
}

// 上传图片
const handleAvatarSuccess = (response: any, uploadFile: UploadUserFile) => {
     // 假设后台返回的图片URL在 response.data.url 中
    const imageUrl = response.data.url;
    uploadFile.url = imageUrl;
    FileINfo(fileList.value);
}
// 图片
const FileINfo = (info: any) => {
    let pImg = "";
    info.map(x => {
        pImg += x.name + ","
    })
    pImg = pImg.substring(0, pImg.length - 1);
    let Fileurl = reactive({
        pImg: pImg,
        pTimeId: route.query.pTimeId
    })
    axios.post("http://localhost:5020/api/Uploadss/Upload", Fileurl).then(res => {
        if (res.data.isSuc) {
            ElMessage.success("完成");
            return;
        }
    })
}

// 图片判重
const beforeAvatarUpload = (file: any) => {
    if (fileList.value.findIndex(x => x.name == file.name) != -1) {
        ElMessage({
            type: "warning",
            message: "图片已存在",
            duration: 2000
        });
        return false;
    } else {
        return true;
    }
}
// 删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    // 删除和上传一个方法
    FileINfo(fileList.value);
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 放大图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

onMounted(() => {
    getFileUrl();
    getTraceableInfo();
})
</script>

<style></style>